<template>
    <div id="asyncComp">
        <h2>这是一个异步组件</h2>
        <a-table
            :columns="columns"
            :data-source="heros"
            :rowKey="row => row.name"
        >
        </a-table>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    setup() {
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                slots: {customRender: 'name' },
            },
            {
                title: '年龄',
                dataIndex: 'age',
                slots: {customRender: 'age' },
            },
            {
                title: '职业',
                dataIndex: 'job',
                slots: {customRender: 'job'}
            },
            {
                title: '技能',
                dataIndex: 'skill',
                slots: {customRender: 'skill'},
            }
        ]
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                axios.get('../../../../static/heros.json').then((res) => {
                    resolve({
                        heros:res.data,
                        columns,
                    })
                })
            },3000)
        })
    },
}
</script>